<template>
  <canvas ref="canvas" class="bg-gray-200" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import TowerCanvas from './TowerCanvas.ts'

const canvas = ref<HTMLCanvasElement>()
const { config, towerData } = defineProps<{
  config: CanvasConfig
  towerData: TowerPointModel[]
}>()

watch(
  [() => config],
  () => {
    new TowerCanvas(canvas.value!, config, towerData).draw()
  },
  { deep: true },
)
</script>
